<div class="list-filter">
    <div class="list-filter-icon">
        <img ng-click="toggle()" src="../src/img/UIIcons/filter.png" alt="">
    </div>
    <ul class="filter-head" ng-show="visible">
        <li  ng-class="{'fiter-head-selected':setQuery}" ng-click="setQuery=true"> 
            <span class="filter-head-left"> <i ng-show="setQuery" class="fa fa-check"></i> </span> 
            <span class="filter-head-right">查询条件设置</span>    
        </li>
        <li  ng-class="{'fiter-head-selected':!setQuery}" ng-click="setQuery=false">
            <span class="filter-head-left"> <i ng-show="!setQuery" class="fa fa-check"></i> </span> 
            <span class="filter-head-right">列表分类设置</span>
        </li>
    </ul>

    <ul class="filter-ul" ng-show="visible&&setQuery">
        <span class="filter-list-head">查询条件设置</span>
        <li class="checkbox" ng-repeat="item in queryTermsFilterList "> <label  ><input  ng-model="item.visible"  checked type="checkbox">{{item.name}}</label> </li>
    </ul>

    <ul class="filter-ul" ng-show="visible&&!setQuery">
        <span class="filter-list-head">列表分类设置</span>
        <li class="checkbox" ng-repeat="item in tabHeadFilterList"><label ><input ng-model="item.visible" ng-change="handTabHeadChange(item)" checked type="checkbox">{{item.name}}</label></li>
    </ul>
</div>

<style> 
    .list-filter{
        font-size: 12px;
        width: 180px;
        background-color: #fff;
    }
    .list-filter-icon img{
        display: block;
        /* float: right; */
        margin-left: 120px;
        cursor: pointer;
    }
    
    .filter-head{
        border:1px solid #d1d4d8;
        width: 150px;
        border-radius: 3px;
        padding: 10px;
        margin-top: 10px;
    }
    .filter-head li {
        display: block;
        height: 25px;
        line-height: 25px;
        cursor: pointer;
    }
    .filter-head-right{
        position: relative;
        display: inline-block;
        width: 110px;
        text-align: right;
        padding-right: 20px;
        padding-left: 5px;
    }
    .filter-head-left{
        display: inline-block;
        width: 13px;
    }

    .filter-head li i{
        display: inline-block;
        padding-left: 5px;
        
    }
    .fiter-head-selected{
        background-color: #d1e7f5;
        border-radius: 3px;
    }
    

    .filter-ul{
        width: 150px;
        border:1px solid #d1d4d8;
        border-radius: 3px;
        padding-left: 30px;
        padding-right: 10px;
        max-height: 300px;
        overflow-y: auto;
    }
    .filter-list-head{
        display: block;
        /* width:  */
        margin: 10px 0;
        padding-bottom: 10px;
        border-bottom: 1px solid #d1d4d8;

    }

</style>